<template>
    <div class="content" style="font-size: 14px;padding:4px 10px;">
        <div style="overflow-y: auto;height: 100%;padding-bottom: 40px;">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getSafeRecoList">
                <div class="stepsItemContentDiv" v-for="item, index in dataList" :key="index">
                    <div class="flex">
                        <img :src="item.recordphoto" @click="imagePreview(item.recordphoto)"
                            style="width: 100px;height: 90px;margin-right: 10px;" />
                        <div style="width: 100%;" @click="handle(item)">
                            <div class="flexLR">
                                <div>
                                    <p style="font-size: 16px;" class="ellipsis">
                                        {{ item.warnmsg }}
                                    </p>
                                    <p style="font-size: 12px;" class="ellipsis">责任人：{{ item.nowProcessName }}</p>
                                </div>
                                <div class="unread">未处理</div>
                            </div>
                            <p style="font-size: 10px;color: #BEBEBE;margin-top: 10px;">识别时间：{{ item.recordtime }}</p>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>

        <!-- 处理 -->
        <van-popup class="handlePopup" v-model:show="handleShow" closeable :close-on-click-overlay="false"
            :style="{ width: '90%' }">
            <p style="font-size: 18px;margin:12px 15px">{{ formValue.defend }}</p>
            <van-field v-model="formValue.msg" type="textarea" label="处理描述" maxlength="500" show-word-limit rows="4"
                autosize placeholder="请输入内容" label-align="top" style="background: transparent;" />
            <p style="font-size: 13.43px;margin:12px 15px;color: #ffffff;"><span style="color: red;">*</span>处理图片</p>
            <van-uploader v-model="formValue.file" accept="image" max-count="1" style="margin: 0 20px;">
                <van-button
                    style="height: 2.1rem;width: 2.1rem;background: transparent;color: #ffffff;border-style:dashed;">
                    <img src="../../../assets/images/workbench/uploadImg.png" alt="" style="width: 100%;height: 100%;">
                </van-button>
            </van-uploader>

            <div class="flexLR" style="margin: 20px">
                <van-button type="primary" class="saveBtn2" @click="handleShow = false">取消</van-button>
                <van-button type="primary" class="saveBtn" @click="handleSubmit">确定</van-button>
            </div>
        </van-popup>
    </div>
</template>

<script name="Home">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { useAppStore } from "@/store";
import { GetSafeRecoList, GetSafeRecoFlow, GetNowProcess, DisposeNowProcess } from "@/api";
import { CreatedFormData } from "@/utils/CreatedFormData";
import { showToast, showSuccessToast, showFailToast, showImagePreview } from 'vant';
export default defineComponent({
    name: 'monitoring',
    setup() {
        const appStore = useAppStore();
        const dataList = ref([]);
        const loading = ref(false);
        const finished = ref(false);
        const pageIndex = ref(1);
        const getSafeRecoList = async () => {
            let fm = CreatedFormData({
                xid: appStore.projectInfo.id,
                isauto: '',
                pageIndex: pageIndex.value,
                pageSize: 10,
                isdispose: 'false'
            })
            const res = await GetSafeRecoList(fm);
            if (res.data) {
                res.data.forEach(e => {
                    e.nowProcessId = e.flowLinklist.map(i => i.principaluserinfo.id).join(',');
                    e.nowProcessName = e.flowLinklist.map(i => i.principaluserinfo.userName).join('、');
                });

                dataList.value = dataList.value.concat(res.data);
                pageIndex.value++;
                loading.value = false;
                if (dataList.value.length >= res.count) {
                    finished.value = true;
                }
            } else {
                finished.value = true;
            }
        };

        const handleShow = ref(false);
        const formValue = ref({
            defend: '',
            msg: '',
            file: []
        })
        const recognitionInfo = ref({});
        const handle = async (item) => {
            if (!(item.nowProcessId.includes(appStore.userInfo.id))) {
                return showToast('您没有权限处理该隐患');
            }
            formValue.value = {
                defend: '',
                msg: '',
                file: []
            }
            formValue.value.defend = item.warnmsg;
            recognitionInfo.value = item;
            getNowProcess()
            handleShow.value = true;
        }

        const safeFlowId = ref(null);

        const disposeUser = ref({});
        const getSafeFlow = async () => {
            let fm =
            {
                id: appStore.projectInfo.id,
            }
            const res = await GetSafeRecoFlow(fm);
            if (res.data != null) {
                safeFlowId.value = res.data.id;
            }
        }
        const getNowProcess = async () => {
            let fm = {
                id: safeFlowId.value,
                data: recognitionInfo.value.id,
            }
            const res2 = await GetNowProcess(fm);
            if (res2.data != null) {
                disposeUser.value = res2.data.find((el) => el.principal == appStore.userInfo.id);
            }
        }

        const handleSubmit = async () => {
            if (formValue.value.msg == '') {
                showFailToast('请输入处理描述');
                return
            }
            if (formValue.value.file.length < 1) {
                showFailToast('请上传图像信息')
                return
            }
            let fm = CreatedFormData(
                {
                    id: disposeUser.value.id,
                    flowid: disposeUser.value.flowid,
                    principal: disposeUser.value.principal,
                    dispose: formValue.value.msg,
                    file: formValue.value.file[0].file,
                    saferecoid: recognitionInfo.value.id,
                })
            const res = await DisposeNowProcess(fm);
            if (res.code == 0) {
                showSuccessToast(res.msg)
                handleShow.value = false;
                getSafeRecoList()
            } else {
                showFailToast(res.msg)
            }
        };

        const imagePreview = async (file) => {
            showImagePreview([file])
        }

        onMounted(() => {
            getSafeFlow()
        });


        return {
            dataList,
            loading,
            finished,
            getSafeRecoList,
            handle,
            formValue,
            handleShow,
            handleSubmit,
            imagePreview
        };
    },
});
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;
}

.stepsItemContentDiv {
    color: #ffffff;
    background: url('../../../assets/images/workbench/JKBG.png') no-repeat;
    background-size: 100% 100%;
    padding: 26px;
    line-height: 50px;
    font-size: 22px;
    margin-top: 20px;
}

.unread {
    border: 2px solid #ff4004;
    color: #ff4004;
    font-size: 30px;
    width: 130px;
    text-align: center;
    transform: rotate(-15deg);
}

.ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 3.5rem;
}

.saveBtn {
    width: 48%;
    height: 66px;
    border-radius: 6px;
    background: linear-gradient(180deg, #7FA9DB 0%, #93D3EF 97.76%);
    border: none;
}

.saveBtn2 {
    width: 48%;
    height: 66px;
    border-radius: 6px;
    background: linear-gradient(180deg, #BEB499 0%, #E1CA86 97.76%);
    border: none;
}

// 弹窗处理
:deep(.handlePopup) {
    background-color: #111d37;
    color: #ffffff;
}

:deep(.van-field__label) {
    color: #ffffff;
}

:deep(.van-field__control) {
    color: #ffffff;
}

:deep(.van-uploader__file) {
    background-color: transparent;
    border: 1px dashed #fffffF;
    border-radius: 6px;
}

:deep(.van-uploader__file-name) {
    color: #ffffff;
}

:deep(.van-uploader__file-icon) {
    color: #ffffff;
}
</style>